<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('积存量变化趋势图')"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" style="height: 95%">

    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>历史积存量变化趋势图</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>

        <div class="ibox-content h-full">
            <!--  查询日期类型   -->
            <span style="margin-left:50px;margin-top:15px;display:inline-block;">查询日期类型：</span>
            <span style="width:200px;display:inline-block;">
                <select id="datetype" name="datetype" class="form-control"   >
                    <option value='1'>近一周</option>
                    <option value='2'>按月查询</option>
                    <option value='3'>按年查询</option>
                </select>
            </span>
            <!--  按月查询   -->
            <!-- <span class="input-group-addon" style="width:20px;height:30px;text-align:center;"> -->
                <!-- <i class="fa fa-calendar"></i></span> -->
            <span id="spanmonth" style="margin-left:50px;display:none;">按月查询：</span>
            <input id="datemonth" class="form-control" style="width:200px;display:none;"
                   placeholder="yyyy-MM" autocomplete="off" type="text" readonly>
            <!--  按年查询   -->
            <span id="spanyear" style="margin-left:50px;display:none;">按年查询：</span>
            <input id="dateyear" class="form-control" style="width:200px;display:none;"
                   placeholder="yyyy" autocomplete="off" type="text" readonly>
            <!--  区县   -->
            <span id="spancounty" style="margin-left:50px;display:inline-block;">区县：</span>
            <span style="width:260px;display:inline-block;">
                <select id="county" name="county" class="form-control"   >
                    <option value='1'>所有</option>
                    <!--<option th:each="arrayS:${database}" th:text="${arrayS}" th:value="${arrayS}"></option>-->
                </select>
            </span>
            <!--  查询按钮   -->
            <a class="btn btn-success" style="margin-left:50px;" onclick="selectyf()"><i class="fa fa-search"></i> 查询 </a>
            <!--  echarts图表   -->
            <div class="echarts  h-full" id="echarts-axis-chart"></div>
        </div>
    </div>


</div>


<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<th:block th:include="include :: datetimepicker-js"/>


<script th:inline="javascript">

    var prefix = ctx + "yf/reports";

    var axisChart = echarts.init(document.getElementById("echarts-axis-chart"));

    // 日期、积存量
    var echartData = [];

    $(function () {

        // 查询区县
        initCounty();

        // 初始化折线图 -- 近一周
        Initialize('1','','');

        axisChart.on('click', function (params) {
            if (params.seriesType == 'bar') {
                console.log(params);
                // alert(params);
                // Initialize(params.data.disId);
            }
        });


        // 查询日期类型下拉列表切换事件
        $('#datetype').change(function(){
            var mdatetype = $(this).val();
            if( mdatetype === '1' ){
                document.getElementById('spanmonth').style.display='none';
                document.getElementById('datemonth').style.display='none';
                document.getElementById('spanyear').style.display='none';
                document.getElementById('dateyear').style.display='none';
            }else if( mdatetype === '2' ){
                document.getElementById('spanmonth').style.display='inline-block';
                document.getElementById('datemonth').style.display='inline-block';
                document.getElementById('spanyear').style.display='none';
                document.getElementById('dateyear').style.display='none';
            }else if( mdatetype === '3' ){
                document.getElementById('spanyear').style.display='inline-block';
                document.getElementById('dateyear').style.display='inline-block';
                document.getElementById('spanmonth').style.display='none';
                document.getElementById('datemonth').style.display='none';
            }
        });


        // 按月查询
        $('#datemonth').datetimepicker({
            // format: "yyyy-mm-dd hh:ii:ss",
            format: "yyyy-mm",
            startDate: "2020-08",
            endDate: new Date(),
            startView: "year",  // 初始化视图是‘年’
            minView: "year",    // 最精确视图为'月'
            maxView: "year",    // 最高视图为'年'
            autoclose: true
        });

        // 按年查询
        $('#dateyear').datetimepicker({
            format: "yyyy",
            startDate: "2019",
            endDate: new Date(),
            startView: "decade",    // 初始化视图是‘年’
            minView: "decade",      // 最精确视图为'月'
            maxView: "decade",      // 最高视图为'年'
            autoclose: true
        });


    });



    //获取医院暂存点
    function initCounty() {
        var getCountyUrl = ctx + "yf/warning/getCountyByDistrictsId";
        $("#county").empty().append('<option value="">-- 所有区县 --</option>');
        $.post(getCountyUrl, {}, function (data) {
            if( data.rows != "" && data.rows != null ){     // 如果医院有暂存点
                // alert( data.rows.length );
                $.each(data.rows, function (i, d) {
                    $("#county").append("<option value='" + d.id + "'>" + d.name + "</option>");
                });
            }

        }, 'json');

    }




    // 查询按钮
    function selectyf(){
        var mdatetype = $('#datetype').val();
        if( mdatetype === '1' ){    // 近一周
            // 查询
            Initialize(mdatetype,'','');
        }else if( mdatetype === '2' ){      // 按月查询
            var yearMonth = $('#datemonth').val();
            if( yearMonth === null || yearMonth === '' ){
                layer.msg("&nbsp;&nbsp;&nbsp;请选择年月",{icon:5});
                return;
            }
            // 查询
            Initialize(mdatetype,yearMonth,'');
        }else if( mdatetype === '3' ){      // 按年查询
            var year = $('#dateyear').val();
            if( year === null || year === '' ){
                layer.msg("&nbsp;&nbsp;&nbsp;请选择年份",{icon:5});
                return;
            }
            // 查询
            Initialize(mdatetype,'',year);
        }
    }


    // echarts
    function Initialize(datetype,yearMonth,year) {
        // 区县
        var county = $('#county').val();

        // alert(datetype  + ' -----  ' + yearMonth + ' -----  ' + year  );
        $.post(prefix + "/echarets/storageHistoryAxisList",{
            dateType: datetype,
            yearMonth:yearMonth,
            year:year,
            countyId:county
            },function (res) {
            if (res.code == 0) {
                echartData = res.rows;
                // alert( echartData[0].statisticsDate2 );
                var jd;
                if( datetype === '1' ){
                    jd = 0;
                }else{
                    jd = 40;
                }
                var option = {
                    tooltip: {
                        trigger: 'axis'     // item 或 axis  鼠标滑上时的触发类型
                    },
                    legend: {       // 图例
                        data: ['积存量（kg）'],
                        itemWidth:60,       // 图例图形宽度
                        top: 10,
                        left: '80%',
                        textStyle: {
                            color: '#000'
                        }
                    },
                    grid:{
                        left: '2%',
                        right: '5%',
                        bottom: '8%',
                        top: '10%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,  // false时，折线第一个点在y轴上
                        data: echartData.map(x => { return x.statisticsDate2 + "" }),
                        axisLabel: {
                            interval: 0,
                            rotate: jd
                        },
                        axisLine: {     // 标尺 横向
                            lineStyle: {
                                color: '#000'
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} Kg'
                        },
                        axisLine: {     //标尺 横向
                            lineStyle: {
                                color: '#000'
                            }
                        }
                    },
                    series: [
                        {
                            name: '积存量（kg）',
                            type: 'line',
                            color: '#1CCED1',
                            label: {
                                normal: {
                                    show: true,
                                    color: '#1CCED1'
                                }
                            },
                            data: echartData
                        }
                    ]
                };

                axisChart.setOption(option);
                $(window).resize(axisChart.resize);
            }

        });
    }


</script>
</body>
</html>